<template>
  <div class="zx-dialog">
    <transition name="tran-scal">
      <div class="zx-dialog-box tran-scal" v-show="show">
        <div class="zx-dialog-main">
          <div v-if="title !== ''" class="title">{{ title }}</div>
          <div class="body">
            <slot name="body">
              <div v-if="type === 'tips'" class="tips">{{ tipsmsg }}</div>
              <div v-if="type === 'warn' || type === 'success' || type === 'error'" class="warn">
                <div class="img" :class="{scuess: type === 'scuess', warn: type === 'warn', error: type === 'error'}"><img src="../../assets/img/warn.png" /></div>
                <div class="text">{{ tipsmsg }}</div>
                <div style="clear: both;"></div>
              </div>
            </slot>
          </div>
          <div class="button">
            <zx-button :type="butType" :data="data" @on-click="click"></zx-button>
          </div>
        </div>
      </div>
    </transition>
    <transition name="tran-set">
      <div class="zx-dialog-mask tran-set" @click="hideThis" v-show="show"></div>
    </transition>
  </div>
</template>
<script>
export default {
  name: 'zxDialog',
  model: {
    prop: 'show',
    event: 'change'
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    data: {
      type: Array,
      default () {
        return []
      }
    },
    title: {
      type: String,
      default: '标题'
    },
    type: {
      type: String,
      default: 'tips'
    },
    butType: {
      type: String,
      default: 'button'
    },
    tipsmsg: {
      type: String,
      default: '您的账号已在其他设备登录，您已处于未登陆状态。'
    }
  },
  data () {
    return {
      chenck: [],
      valText: ''
    }
  },
  methods: {
    click (val) {
      if (val === 0) {
        this.$emit('on-click-no', val)
      } else if (val === 1) {
        this.$emit('on-click-yes', val)
      }
      this.$emit('update:show', false)
      this.$emit('change', false)
    },
    hideThis () {
      this.$emit('on-click-no', 0)
      this.$emit('update:show', false)
      this.$emit('change', false)
    }
  },
  mounted: function () { },
  watch: { }
}
</script>
<style lang="less">
.zx-dialog { width: 100%; height: 100%; position: fixed; left: 0; top: 100%; z-index: 30000;}
.zx-dialog-box { position:absolute; left: 0; top: -50vh; z-index: 11; padding: 0 5vw; width: 100%;}
.zx-dialog-main { background: #fff; width: 100%; border-radius: 0.1rem;}
.zx-dialog-main>.title { border-bottom: 1px solid #e6e6e6; height: 1.2rem; text-align:center; line-height: 1.2rem; font-size: 0.36rem; color: #333; font-weight:bold;}
.zx-dialog-main>.body { padding: 0.5rem;}
.zx-dialog-main>.body>.tips { line-height: 0.52rem; font-size: 0.32rem;}
.zx-dialog-main>.body>.warn { display: flex; line-height: 0.48rem; padding: 0.8rem 0;}
.zx-dialog-main>.body>.warn>.img { width: 0.6rem; height: 0.6rem;}
.zx-dialog-main>.body>.warn>.img img { width: 100%; height: 100%;}
.zx-dialog-main>.body>.warn>.text { flex: 1; margin-left: 0.3rem;}
.zx-dialog-main>.button { height: 0.9rem; border-top: 1px solid #e6e6e6;}
.zx-dialog-mask { position:absolute; left: 0; top: -100vh; z-index: 10; width: 100%; height: 100%; background: rgba(0,0,0,0.5);}
.tran-set { opacity: 1; transition: all .4s ease;}
.tran-set-enter-to { opacity: 1;}
.tran-set-enter, .tran-set-leave, .tran-set-leave-to { opacity: 0;}
.tran-scal { transform: translateY(-50%) scale(1); transition: all .4s ease;}
.tran-scal-enter { transform: translateY(-50%) scale(1.5); opacity: 0;}
.tran-scal-enter-to { transform: translateY(-50%) scale(1); opacity: 1;}
.tran-scal-leave, .tran-scal-leave-to { transform: translateY(-50%) scale(0.5); opacity: 0;}
</style>
